<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>博客管理</title>
    <link rel="stylesheet" type="text/css" href="ui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="ui/themes/icon.css">
    <script type="text/javascript" src="ui/jquery.min.js"></script>
    <script type="text/javascript" src="ui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="ui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="ui/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="js/crud.js"></script>
    <script type="text/javascript" src="js/date.js"></script>
    <style type="text/css">
        a {
            margin-left: 5px;
        }
    </style>
    <script type="text/javascript">
        var name = "blog";
        var columns = [[
            {field: 'id', title: '编号', width: 60},
            {field: 'title', title: '标题', width: 100},
            {field: 'subject', title: '主题', width: 100},
            {field: 'url', title: '地址', width: 100},
            {field: 'sysyUrl', title: '页面地址', width: 100},
            {field: 'mainImgUrl', title: '主图地址', width: 100},
            {
                field: 'createtime', title: '创建时间', width: 120,
                formatter: function (value, row, index) {
                    if (value) {
                        return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
                    }
                }
            },
            {
                field: 'updatetime', title: '修改时间', width: 130,
                formatter: function (value, row, index) {
                    if (value) {
                        return new Date(value).Format("yyyy-MM-dd hh:mm:ss");
                    }
                }
            },
            {
                field: 'state', title: '状态', width: 60,
                formatter: function (value, row, index) {
                    if (value == 0) {
                        return "<span style='color: darkred'>未上线</span>";
                    }
                    if (value == 1) {
                        return "<span style='color: #00ee00'>已上线</span>";
                    }
                    if (value == -1) {
                        return "<span style='color:red'>未知状态</span>";
                    }
                }
            },
            {field: 'auth', title: '作者', width: 100},

            {
                field: '-', title: '操作', width: 250,
                formatter: function (value, row, index) {
                    var oper = "<a href=\"http://www.myxinge.cn/blog/" + row.url + "\" target='_blank'>预览</a>";
                    if (row.state == 0) {
                        oper += ' <a href="javascript:void(0)" onclick="up(' + row.id + ')">上线</a>';
                    }
                    if (row.state == 1) {
                        oper += ' <a href="javascript:void(0)" onclick="down(' + row.id + ')">下线</a>';
                    }
                    if (row.state == -1) {
                        oper += "<span style='color:red'>未知</span>";
                    }
                    oper += '<a href="javascript:void(0)" onclick="edit(' + row.id + ')">编辑</a>';
                    oper += '<a href="javascript:void(0)" style="color:red" onclick="del(' + row.id + ')">删除</a>';
                    oper += '<a href="javascript:void(0)" onclick="openUpload(' + row.id + ')">封面上传</a>';
                    return oper;
                }
            }
        ]];

        //up
        function up(id) {
            $.ajax({
                url: "/admin/blog/changState/" + id,
                dataType: "json",
                type: "put",
                success: function (rtn) {
                    $.messager.alert('提示', rtn.message, 'info', function () {
                        if (rtn.success) {
                            //刷新表格
                            $('#grid').datagrid('reload');
                        }
                    });
                }
            });
        }

        //down
        function down(id) {
            up(id);
        }

    </script>
</head>
<body>
<!--条件查询表单-->
<div class="easyui-panel" style="padding-left:4px;border-bottom:0px;">
    <div style="height:2px;"></div>
    <form id="searchForm">
        博客标题：<input name="title">
        主题：<input name="subject">
        地址：<input name="url">
        状态：<input name="state">
        <button type="button" id="btnSearch">查询</button>
        <button type="button" id="btnReset">清除</button>
    </form>
    <div style="height:2px;"></div>
</div>
<table id="grid"></table>


<!--详情窗口/更新-->
<div id="editDlg" style="padding:8px;">
    <form id="editForm" enctype="multipart/form-data">
        <input type="hidden" name="id"/>
        <table width="100%">
            <tr>
                <td>标题</td>
                <td><input style="width: 100%" name="title"></td>
            </tr>
            <tr>
                <td>主题</td>
                <td><textarea style="width: 100%;height: 100px;" wrap="soft" onkeyup="keypress()" onblur="keypress()" id="myarea"
                              name="subject"></textarea>
                    <span style="color: #0000cc" id="pinglun"></span>
                </td>
            </tr>
            <tr>
                <td>地址</td>
                <td><input style="width: 100%" name="url"></td>
            </tr>
            <tr>
                <td>资源地址</td>
                <td><textarea style="width: 100%;" disabled="disabled" name="sysyUrl"></textarea></td>
            </tr>
            <tr>
                <td>创建时间</td>
                <td><input style="width: 100%" disabled="disabled" name="createtime"></td>
            </tr>
            <tr>
                <td>修改时间</td>
                <td><input style="width: 100%" disabled="disabled" name="updatetime"></td>
            </tr>
            <tr>
                <td>签名</td>
                <td><input style="width: 100%" name="auth"></td>
            </tr>
            <!--<tr>
                <td>大图文件</td>
                <td><input style="width: 100%" type="file" name="mainImg"></td>
            </tr>-->
        </table>
    </form>
</div>
</body>
</html>
<script>
    function keypress() //textarea输入长度处理
    {
        var text1 = document.getElementById("myarea").value;
        var len; //记录剩余字符串的长度
        if (text1.length >= 200) //textarea控件不能用maxlength属性，就通过这样显示输入字符数了
        {
            document.getElementById("myarea").value = text1.substr(0, 200) + "...";
            len = 0;
        } else {
            len = 200 - text1.length;
        }
        var show = "还可以输入" + len + "个字";
        document.getElementById("pinglun").innerText = show;
    }
</script>
